<template>
  <el-container>
    <el-header >
      <el-form style="display:flex;height:40px;justify-content:space-between;align-items: center;">
        <el-radio v-model="radio" label="1" >月汇总</el-radio>
        <el-radio v-model="radio" label="2" >日明细</el-radio>
        <el-date-picker v-model="value1" type="date" placeholder="开始时间" style="width:200px;"> </el-date-picker>
        <el-date-picker v-model="value2" type="date" placeholder="结束时间" style="width:200px;margin-left:20px;"> </el-date-picker>
        <el-select v-model="value3" placeholder="联络线" style="width:150px;margin-left:20px;">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value4" placeholder="送出省" style="width:150px;margin-left:20px;">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value5" placeholder="落地省" style="width:150px;margin-left:20px;">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value6" placeholder="交易类型" style="width:150px;margin-left:20px;">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value7" placeholder="线损类型" style="width:150px;margin-left:20px;">
          <el-option
            v-for="item in options5"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" style="width:80px;margin-left:20px;">查询</el-button>
      </el-form>
      <el-form style="display:flex;height:40px;align-items: center;margin-top:20px;">
        <el-button type="primary" size="mini" style="margin-left:20px;">日出清结算</el-button>
        <el-button type="primary" size="mini" style="margin-left:20px;">日实际线损结算</el-button>
        <el-button type="primary" size="mini" style="width:80px;margin-left:20px;">计算线损</el-button>
        <el-button type="primary" size="mini" style="width:80px;margin-left:20px;">保存</el-button>
        <el-button type="primary" size="mini" style="width:80px;margin-left:20px;">导出</el-button>
        <el-button type="primary" size="mini" style="width:80px;margin-left:20px;">偏差配置</el-button>
        <el-button type="primary" size="mini" style="width:80px;margin-left:20px;">映射配置</el-button>
      </el-form>
    </el-header>
    <el-main>
      <el-table :border="true" :stripe="true" 
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;margin-top:40px;"
        @selection-change="handleSelectionChange">
        <el-table-column :show-overflow-tooltip='true' prop="name" label="交易名称" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="日期" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="联络线名称" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="交易通道名称" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="送出省" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="落地省" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="送出量" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="送出均价" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="交易类型" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="A/B段" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="日计划偏差" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="对应A段" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="价格方案" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="送出省送出价格" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="送出省送出电量" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="送出分部送出价格" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="送出分部送出电量" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="转运分部受入价格" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="转运分部受入电量" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="转运分部送出价格" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="转运分部送出电量" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="受入分部受电价格" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="受入分部受电电量" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="落地省落地价格" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="落地省落地电量" align="center" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip='true' prop="ajustRemark" label="校验信" align="center"></el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<script>
export default {
  data () {
      return {
        tableData:[{
          name:'show-overflow-tooltipshow-overflow-tooltipshow-overflow-tooltipshow-overflow-tooltipv',
          date:'2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
          ajustRemark:'flkaogviom[oqmreomv[wormv[om[omns[m[wromgt[wnjisjyn[sgmitm',
        }],
        radio: '2',
        options1: [{
          value: '选项1',
          label: '联络线1'
        }, {
          value: '选项2',
          label: '联络线2'
        }, {
          value: '选项3',
          label: '联络线3'
        }],
        options3: [{
          value: '选项1',
          label: '落地省1'
        }, {
          value: '选项2',
          label: '落地省2'
        }, {
          value: '选项3',
          label: '落地省3'
        }],
        options2: [{
          value: '选项1',
          label: '送出省1'
        }, {
          value: '选项2',
          label: '送出省2'
        }, {
          value: '选项3',
          label: '送出省3'
        }],
        options4: [{
          value: '选项1',
          label: '交易类型1'
        }, {
          value: '选项2',
          label: '交易类型2'
        }, {
          value: '选项3',
          label: '交易类型3'
        }],
        options5: [{
          value: '选项1',
          label: '线损类型1'
        }, {
          value: '选项2',
          label: '线损类型2'
        }, {
          value: '选项3',
          label: '线损类型3'
        }],

        value:'',
        value1:'',
        value2:'',
        value3:'',
        value4:'',
        value5:'',
        value6:'',
        value7:'',
    }
  },
  methods:{
    handleSelectionChange() {},
  }
}
</script>
<style lang="scss" scoped>
el-header{
  display: flex;
  justify-content:space-around;
  align-items: center;
}
</style>